<template>
  <el-dialog
    v-model="visible"
    :title="announcement.title"
    width="700px"
    @close="handleClose"
  >
    <div class="announcement-dialog-content">
      <div class="announcement-meta">
        <el-tag 
          :type="getPriorityType(announcement.priority)" 
          size="small"
        >
          {{ getPriorityText(announcement.priority) }}
        </el-tag>
        <div class="meta-item">
          <el-icon><Clock /></el-icon>
          <span>{{ formatTime(announcement.publishTime) }}</span>
        </div>
      </div>
      
      <div class="announcement-content">
        {{ announcement.content }}
      </div>
    </div>
    
    <template #footer>
      <el-button type="primary" @click="handleClose">
        <el-icon><Check /></el-icon>
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { Clock, Check } from '@element-plus/icons-vue';

export default {
  name: 'AnnouncementDialog',
  components: {
    Clock,
    Check
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    announcement: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    visible: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit('update:modelValue', val);
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false;
    },
    
    formatTime(time) {
      if (!time) return '-';
      try {
        const date = new Date(time.replace(' ', 'T'));
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      } catch (error) {
        return time;
      }
    },
    
    getPriorityText(priority) {
      const texts = {
        0: '普通',
        1: '重要',
        2: '紧急'
      };
      return texts[priority] || '普通';
    },
    
    getPriorityType(priority) {
      const types = {
        0: 'info',
        1: 'warning',
        2: 'danger'
      };
      return types[priority] || 'info';
    }
  }
};
</script>

<style scoped>
.announcement-dialog-content {
  padding: 12px 0;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #909399;
}

.meta-item .el-icon {
  font-size: 15px;
}

.announcement-content {
  font-size: 15px;
  line-height: 1.8;
  color: #303133;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
